<template>
  <div class='container'>
    <el-card class="box-card">
      <!-- 数据条数-->
<div class="amount1" v-if="$route.query.name">
  <span>学科管理</span>
  <i class=" el-icon-arrow-right" style="padding:0 5px"></i>
  <span>{{$route.query.name}}</span>
  <i class=" el-icon-arrow-right" style="padding:0 5px"></i>
  <span >目录管理</span>
</div>
      <!-- 搜索 新增 -->
 <el-row>
  <el-col :span="18"><div class="grid-content bg-purple">
    <span style="padding-right:12px">目录名称</span>
      <el-input v-model="input" style="width:200px; padding-right:45px "></el-input>
       <span style="padding-right:12px">状态</span>
      <el-select v-model="value" placeholder="请选择" style="width:200px; padding-right:12px ">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
      <el-button size="medium" @click="clearDir">清除</el-button>
      <el-button type="primary" size="medium" @click="handleFilter">搜索</el-button></div>
  </el-col>
  <el-col :span="6">
    <div class="grid-content bg-purple-light" style="float:right;" >
      <el-button type="text" size="medium" v-if="$route.query.name" @click="$router.push({path: '/subjects/list'})">
        <i class="el-icon-back" size="medium" style="padding-right:5px"></i>
        返回学科
        </el-button>
      <el-button type="success" size="small" @click="addSubjects">
        <i class="el-icon-edit" size="medium" style="padding-right:5px"></i>
        新增目录
      </el-button>
      </div>
      </el-col>
</el-row>
<!-- 数据条数-->
<div class="amount">
  <i class="el-alert__icon el-icon-info" ></i>
  <span style="padding-left:8px">{{alertText}}</span>
</div>
<!-- 表格 -->
 <el-table
    :data="tableData"
    show-header
    style="width: 100%">
    <el-table-column
      fixed
      type=index
      prop="index"
      label="序号">
    </el-table-column>
    <el-table-column
      prop="subjectName"
      label="所属学科">
    </el-table-column>
    <el-table-column
      prop="directoryName"
      label="目录名称">
    </el-table-column>
    <el-table-column
      prop="username"
      label="创建者">
    </el-table-column>
    <el-table-column
      label="创建日期">
        <template slot-scope="scope">
        <span>{{scope.row.addDate | forMat('YYYY-MM-DD hh:mm:ss') }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="totals"
      label="面试题数量">
    </el-table-column>
       <el-table-column
      label="状态">
        <template slot-scope="scope">
        <span>{{scope.row.state===1?'已启用':'已禁用' }}</span>
      </template>
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="150">
      <template slot-scope="scope">
        <el-button type="text" size="small" @click="stateHanderl(scope.row)">{{scope.row.state===1?'禁用':'启用'}}</el-button>
        <el-button type="text" size="small" :disabled="(scope.row.state===0)?false:true" @click="edit(scope.row.id)">修改</el-button>
        <el-button type="text" size="small" :disabled="(scope.row.state===0)?false:true" @click="del(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <div class="block"  v-if="!$route.query.name">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    :current-page="pagination.page"
    :total="total"
    :page-sizes="[5, 10, 30, 50]"
    :page-size="pagination.pagesize"
      layout="prev, pager,next,sizes,jumper">
     </el-pagination>
  </div>
  <!-- 添加对话框 -->
  <el-dialog
  :title="isEdit?'修改目录':'新增目录'"
  :visible.sync="addDialogVisible"
  width="400px">
  <DirDialog
  :isEdit="isEdit"
  :id="id"
  :subjectID="pagination.subjectID"
  v-if="addDialogVisible"
  @success="successHnaderl"
  />

</el-dialog>
</el-card>
  </div>
</template>

<script>
import { list, changeState, remove } from '@/api/hmmm/directorys'
import DirDialog from '@/module-hmmm/components/directorys-add.vue'
export default {
  components: {
    DirDialog
  },
  data () {
    return {
      input: '',
      tableData: [],
      total: null,
      alertText: '',
      pagination: {
        page: 1,
        // pagesize: 10
        total: 0,
        pagesize: 10,
        directoryName: null,
        subjectID: null,
        state: null
      },
      isEdit: false,
      id: null,
      addDialogVisible: false,
      options: [{
        value: 1,
        label: ' 已启用 '
      }, {
        value: 0,
        label: ' 已禁用 '
      }],
      value: null
      // subjectid:this.$route.query.id
    }
  },
  created () {
    // console.log(Number(this.$route.query.id))
    if (this.$route.query.id) {
      this.pagination.subjectID = Number(this.$route.query.id)
    }
    // console.log('this', this)
    this.getableData()
  },
  watch: {
    $route: {
      handler (newVal, oldVal) {
        // console.log('newVal, oldVal', newVal, oldVal)
        this.pagination.subjectID = null
        // console.log('newVal, oldVal', newVal, oldVal)
        this.getableData()
      }
    }
  },
  methods: {
    clearDir () {
      this.input = ''
      this.value = null
    },
    async getableData () {
      const { data: res } = await list(this.pagination)
      // console.log(res)
      // 获取数据给dataList
      this.tableData = res.items
      // this.tableData.forEach(item => {
      //   if (item.isFrontDisplay === 1) {
      //     item.isFrontDisplay = '是'
      //   } else {
      //     item.isFrontDisplay = '否'
      //   }
      // })
      // 获取总条数
      this.total = res.counts
      this.alertText = `共 ${this.total} 条记录`
      // 清空路由参数
      // this.$router.push({ query: {} })
      // this.pagination.subjectID = ''
    },
    // 搜索信息
    handleFilter () {
      this.pagination.directoryName = this.input
      this.pagination.state = this.value
      this.pagination.page = 1
      this.getableData(this.pagination)
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.pagination.pagesize = val
      this.pagination.page = 1
      this.getableData(this.pagination)
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.pagination.page = val
      this.getableData()
    },
    // 新增目录
    addSubjects () {
      this.addDialogVisible = true
      this.isEdit = false
    },
    successHnaderl () {
      this.addDialogVisible = false
      this.getableData()
    },
    // 修改状态{id: 350, state: 0}
    async stateHanderl (row) {
      row.state = !row.state
      if (row.state) {
        row.state = 1
      } else {
        row.state = 0
      }
      const res = await changeState({ id: row.id, state: row.state })
      // console.log(res)
      if (res.status !== 200) {
        this.$message.success('操作成功')
      }
      // this.getableData()
    },
    // 修改目录
    edit (id) {
      this.addDialogVisible = true
      this.isEdit = true
      this.id = id
      // console.log(this.id)
    },
    // 删除目录
    del (id) {
      this.$confirm('此操作将永久删除该目录' + ', 是否继续?', '提示', {
        type: 'warning'
      })
        .then(async () => {
          await remove({ id: id })
            .then(response => {
              // console.log('1234', response)
              this.$message.success('删除成功了' + '!')
              this.getableData(this.pagination)
            })
            .catch(response => {
              // console.log(response)
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    }

  }
}
</script>

<style scoped lang='scss'>
  .box-card {
    padding:5px 0;

    .amount {
      height: 40px;
      margin:20px 0;
      padding:12px 16px;
      border-radius:5px;
       background-color: #f4f4f5;
       color: #909399;
    }
      .amount1 {
      height: 40px;
      margin-top:-22px ;
      margin-bottom:20px ;
      padding:12px 16px;
      border-bottom:#ccc solid 1px;
       background-color: #fff;
       color: #909399;
    }
    .block {
      float:right;
      margin:15px 0;
    }
  }
</style>
